<template>
  <div id="content">
    <van-icon class="icons" name="cross" size="30" @click="target" />
    <van-cell title="我的频道" class="font">
      <template #right-icon>
        <van-button
          v-if="flag"
          class="btn"
          plain
          type="danger"
          round
          size="small"
          @click="flag = !flag"
          >取消编辑</van-button
        >
        <van-button
          v-else
          class="btn"
          plain
          type="danger"
          round
          size="small"
          @click="flag = !flag"
          >编辑</van-button
        >
      </template>
      <template #label>
        <van-button
          class="item"
          :color="id === item.id ? 'red' : '#000'"
          @click.stop="id=item.id"
          plain
          v-for="item in userList"
          :key="item.id"
          >{{ item.name
          }}<em v-show="flag" @click.stop="del(item.id)">×</em></van-button
        >
      </template>
    </van-cell>
    <van-cell title="频道推荐" class="font">
      <template #label>
        <div v-if="flag">
          <van-button
            class="items"
            icon="plus"
            color="#000"
            plain
            v-for="item in allList"
            :key="item.id"
            @click="add(item.id)"
            >{{ item.name }}
          </van-button>
        </div>
        <div v-else>
          <van-button
            class="items"
            color="#000"
            plain
            v-for="item in allList"
            :key="item.id"
            >{{ item.name }}
          </van-button>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { list, allChannels, del, add } from '@/api/channel.js'
export default {
  data () {
    return {
      userList: [],
      allList: [],
      flag: false,
      id: JSON.parse(localStorage.getItem('id'))
    }
  },
  methods: {
    del (target) {
      del(target)
      localStorage.removeItem('id')
      this.$toast('删除成功')
      this.getUserList()
      // if(status === 204) return this.$toast('删除成功')
    },
    async add (id) {
      const { status } = await add({
        id,
        seq: this.userList.length
      })
      if (status === 201) {
        await this.getUserList()
        this.$toast('添加成功')
      }
    },
    async getUserList () {
      const {
        data: {
          data: { channels }
        }
      } = await list()
      this.userList = channels
    },
    target () {
      localStorage.setItem('id', this.id)
      this.$router.back()
    }
  },
  async created () {
    await this.getUserList()
    const {
      data: { data }
    } = await allChannels()
    this.allList = data.channels
  }
}
</script>

<style lang="less" scoped>
#content {
  background-color: #fff;
  .font {
    font-size: 32px;
  }
  .icons {
    padding: 28px 32px;
  }
  .btn {
    padding: 0 30px;
    font-size: 30px;
  }
  .item,
  .items {
    background-color: rgb(241, 241, 241);
    border: none;
    margin-right: 22px;
    margin-bottom: 22px;
  }
  .item {
    position: relative;
    em {
      position: absolute;
      top: -10px;
      right: -10px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      background-color: red;
      border-radius: 50%;
      z-index: 9999;
    }
  }
}
/deep/.van-cell {
  margin-bottom: 22px;
}
/deep/.van-cell::after {
  border: none;
}

</style>
